<template>
	<view class="container">
		<view class="ui-all">
			<view class="avatar" @click="avatarChoose">
				<view class="imgAvatar"><view class="iavatar" :style="'background: url(' + avater + ') no-repeat center/cover #eeeeee;'"></view></view>
				<text v-if="avater">修改头像</text>
			</view>

			<view class="ui-list">
				<text>昵称</text>
				<input type="text" :placeholder="value" v-model="username" placeholder-class="place" />
			</view>
			<view class="ui-list">
				<text>手机号</text>
				<input v-if="phone" :disabled="true" type="tel" :placeholder="value" :value="phone" @input="bindmobile" placeholder-class="place" />
			</view>

			<button class="save" @tap="savaInfo">保 存 修 改</button>
		</view>
	</view>
</template>

<script>
import { pathToBase64, base64ToPath } from '@/components/image-tools/index.js';
export default {
	data() {
		return {
			value: '请填写',
			sex: [
				{
					id: 1,
					name: '男'
				},
				{
					id: 2,
					name: '女'
				}
			],
			index: 0,
			region: ['请填写'],
			date: '请填写',
			avater: '',
			description: '',
			url: '',
			username: '',
			phone: '',
			headimg: '',
			userInfo: null
		};
	},
	onShow() {
		this.userInfo = uni.getStorageSync('userInfo');
		this.avater = this.userInfo.avatar;
		this.username = this.userInfo.username;
		this.phone = this.userInfo.phone;
	},
	methods: {
		bindPickerChange(e) {
			this.index = e.detail.value;
		},
		bindRegionChange(e) {
			this.region = e.detail.value;
		},
		bindDateChange(e) {
			this.date = e.detail.value;
		},
		bindnickName(e) {
			this.nickName = e.detail.value;
		},
		bindmobile(e) {
			this.mobile = e.detail.value;
		},
		binddescription(e) {
			this.description = e.detail.value;
		},
		avatarChoose() {
			

			let that = this;
			uni.chooseImage({
				
			
				count: 1,
				type: 'image',
				success(res) {
					/* uni.uploadFile({
				    url:'https://stqingtingadmin.youyacao.com/api/v1/upload',
				    files: res.tempFiles[0],
				    formData: {},
				    header:{"Content-Type": "multipart/form-data"},
				    success: (res) => {

				    }
				}) */
					console.log(res);
					// tempFilePath可以作为img标签的src属性显示图片
			 	const tempFilePaths = res.tempFilePaths[0];
					//that.imgUpload(tempFilePaths);
					pathToBase64(tempFilePaths)
						.then(base64 => {
							that.imgUpload(base64);
						})
						.catch(error => {
							console.error(error);
						});

					/*      var reader = new FileReader();
				              //reader.readAsDataURL(res.tempFiles[0]);
							  reader.readAsDataURL(res.tempFiles[0]);
				              reader.onload = function(){
				                  var binary = this.result;
				                   that.imgUpload(binary);
								 } */
				}
			});
			/* uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera'],
				success(res) {
					console.log(res)
					// tempFilePath可以作为img标签的src属性显示图片
					that.imgUpload(res.tempFilePaths[0]);
					const tempFilePaths = res.tempFilePaths;
				}
			}); */
		},
		getUserInfo() {
			uni.getUserProfile({
				desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
				success: res => {
					console.log(res);
					uni.showToast({
						title: '已授权',
						icon: 'none',
						duration: 2000
					});
				}
			});
		},
		getphonenumber(e) {
			if (e.detail.iv) {
				console.log(e.detail.iv); //传后台解密换取手机号
				uni.showToast({
					title: '已授权',
					icon: 'none',
					duration: 2000
				});
			}
		},
		savaInfo() {
			let that = this;
			let username = that.username;
			let avatar = that.avater;

			let phone = that.phone;

			if (!username) {
				uni.showToast({
					title: '请填写昵称',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			/* updata.nickname = nickname;
			if (!headimg) {
				headimg = that.avater;
			}
			updata.headimg = headimg;
			updata.gender = gender;
			if (that.isPoneAvailable(mobile)) {
				updata.mobile = mobile;
			} else {
				uni.showToast({
					title: '手机号码有误，请重填',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			if (region.length == 1) {
				uni.showToast({
					title: '请选择常住地',
					icon: 'none',
					duration: 2000
				});
				return;
			} else {
				updata.province = region[0];
				updata.city = region[1];
				updata.area = region[2];
			}
			if (birthday == "0000-00-00") {
				uni.showToast({
					title: '请选择生日',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			updata.birthday = birthday;
			updata.description = description; */
			this.$http.post('/complete', { avatar: avatar, phone: phone, username: username }).then(res => {
				if (res.code == 200) {
					uni.showToast({
						title: '修改成功',
						icon: 'none',
						duration: 2000
					});
				}
			});
		},
		isPoneAvailable(poneInput) {
			var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
			if (!myreg.test(poneInput)) {
				return false;
			} else {
				return true;
			}
		},
		async updata(datas) {
			//传后台
		},
		imgUpload(file) {
			console.log(file);
			this.$http.post('/upload', { file: file }).then(res => {
				this.avater = res.data.url;
			});
			let that = this;
			/* uni.uploadFile({

				url:'https://stqingtingadmin.youyacao.com/api/v1/upload', //需传后台图片上传接口
				file: file[0],
				name: 'file',
				formData: {
					type: 'user_headimg'
				},
				success: function(res) {
					var data = JSON.parse(res.data);
					data = data.data;
					that.avater = that.url + data.img;

					that.headimg = that.url + data.img;


				},
				fail: function(error) {
					console.log(error);
				}
			}); */
		}
	},
	onLoad() {}
};
</script>

<style lang="scss" scoped>
.container {
	display: block;
}

.ui-all {
	padding: 20rpx 40rpx;

	.avatar {
		width: 100%;
		text-align: left;
		padding: 20rpx 0;
		border-bottom: solid 1px #f2f2f2;
		position: relative;

		.imgAvatar {
			width: 140rpx;
			height: 140rpx;
			border-radius: 50%;
			display: inline-block;
			vertical-align: middle;
			overflow: hidden;

			.iavatar {
				width: 100%;
				height: 100%;
				display: block;
			}
		}

		text {
			display: inline-block;
			vertical-align: middle;
			color: #8e8e93;
			font-size: 28rpx;
			margin-left: 40rpx;
		}

		&:after {
			content: ' ';
			width: 20rpx;
			height: 20rpx;
			border-top: solid 1px #030303;
			border-right: solid 1px #030303;
			transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			/* IE 9 */
			-moz-transform: rotate(45deg);
			/* Firefox */
			-webkit-transform: rotate(45deg);
			/* Safari 和 Chrome */
			-o-transform: rotate(45deg);
			position: absolute;
			top: 85rpx;
			right: 0;
		}
	}

	.ui-list {
		width: 100%;
		text-align: left;
		padding: 20rpx 0;
		border-bottom: solid 1px #f2f2f2;
		position: relative;

		text {
			color: #4a4a4a;
			font-size: 28rpx;
			display: inline-block;
			vertical-align: middle;
			min-width: 150rpx;
		}

		input {
			color: #030303;
			font-size: 30rpx;
			display: inline-block;
			vertical-align: middle;
		}
		button {
			color: #030303;
			font-size: 30rpx;
			display: inline-block;
			vertical-align: middle;
			background: none;
			margin: 0;
			padding: 0;
			&::after {
				display: none;
			}
		}
		picker {
			width: 90%;
			color: #030303;
			font-size: 30rpx;
			display: inline-block;
			vertical-align: middle;
			position: absolute;
			top: 30rpx;
			left: 150rpx;
		}

		textarea {
			color: #030303;
			font-size: 30rpx;
			vertical-align: middle;
			height: 150rpx;
			width: 100%;
			margin-top: 50rpx;
		}

		.place {
			color: #999999;
			font-size: 28rpx;
		}
	}

	.right:after {
		content: ' ';
		width: 20rpx;
		height: 20rpx;
		border-top: solid 1px #030303;
		border-right: solid 1px #030303;
		transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		/* IE 9 */
		-moz-transform: rotate(45deg);
		/* Firefox */
		-webkit-transform: rotate(45deg);
		/* Safari 和 Chrome */
		-o-transform: rotate(45deg);
		position: absolute;
		top: 40rpx;
		right: 0;
	}

	.save {
		background: #030303;
		border: none;
		color: #ffffff;
		margin-top: 40rpx;
		font-size: 28rpx;
	}
}
</style>
